<template>
	<view class="head">
		<image src="../../static/logo/bg.png" class="bg-img"></image>
	</view>
	<view class="imgs">
		<view class="card" v-for="(item,index) in Data">
			<uni-card :cover="cover">
				<image slot='cover' mode="widthFix" class="img-c" :src='item.img' alt="Image"></image>
				<hr>
				<view class="text">
					{{item.title}}
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getsigns()
		},
		data() {
			return {
				Data: [],
				result: []
			};
		},
		methods: {
			async getsigns() {
				await uni.request({
					url: "http://localhost:8000/sign/signs",
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							for (var i = 0; i < res.data.result.length; i++) {
								this.Data.push({
									title: res.data.result[i].traffic_sign,
									img: this.base64ToBlobUrl(res.data.result[i].img)
								})
							}
						} else {
							uni.showToast({
								title: "获取失败",
								icon: "error",
								duration: 2000
							})
						}
					},
				})
				setTimeout(() => {
					console.log('10秒已过，处理数据...');
				}, 10000); // 10000毫秒 = 10秒
			},
			base64ToBlobUrl(base64String, mimeType = "application/octet-stream") {
				// 将 Base64 字符串解码为二进制数据
				const binaryData = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));

				// 创建 Blob 对象
				const blob = new Blob([binaryData], {
					type: mimeType
				});

				// 通过 URL.createObjectURL 创建 Blob 的 URL
				const blobUrl = URL.createObjectURL(blob);

				return blobUrl;
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;
		height: 200px;

		.bg-img {
			width: 100%;
			height: 200px;
		}
	}

	.imgs {
		width: 98%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.card {
			width: 50%;
			height: 200px;
			margin-bottom: 30px;

			.img-c {
				width: 100%;
				height: 90%;
			}

			.text {
				width: 100%;
				height: 30px;
				text-align: center;
			}
		}
	}
</style>